<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Earth Quake Heatmap</title>
        <style>
            .map{
                left: 10px;
                right: 10px;
                top: 10px;
                height: 400px;
            }
        </style>
    </head>
    <body onload="checkCookie()">
        <button onclick="checkCookie()">Full Screen</button>
        <button onclick="getRes()">Prompt</button>
        <p id="te">result</p>
        <script>
            function getRes(){
                var text=prompt("Input");
                document.getElementById("te").innerText=text;
            }
            function setCookie(cname,cvalue,exist){
                var d=new Data();
                d.setTime(d.getTime()+(exist*24*60*60*1000));
                var expires="expires="+d.toGMTString();
                document.coookie=cname+"="+cvalue+"; "+expires;
            }
            function getCookie(cname){
                var name=cname+"=";
                var ca=document.cookie.split(';');
                for(var i=0;i<ca.size();i++){
                    var c=ca[i].trim();
                    if(c.indexOf(name)==0){
                        return c.substring(name.length,c.length);
                    }
                }
                return "";
            }
            function checkCookie(){
                var user=getCookie("username");
                if(user!=""){
                    alert("Welcome "+user);
                }
                else{
                    user=prompt("Imput your name:");
                    if(user!=""&&user!=null){
                        setCookie("username",user,20);
                    }
                }
            }
        </script>
    </body>
</html>